<template>
	<div class="museum-wrap" >
		<div class="museum-index" >
			<div :class="['back-wrap', {'leftShiftAnimation': isAnimation, 'iPhonex': $utils.isIphoneX() }]" @click="handleBack" ><i class="iconfont icon-back-new"></i></div>
			<div class="door-wrap">
				<div :class="['door-left', {'leftShiftAnimation': isAnimation }]">
				<img src="./assets/door-left.jpg" @load="onloadIndex" class="imgTransparent"/>
					<div :class="['title',{ 'iPhonex': $utils.isIphoneX()}]"></div>
					<div class="lock-left" :style="lockStyle" ></div>
				</div>
				<div :class="['door-right', {'rightShiftAnimation': isAnimation}]">
					<p :class="['assist', {'iPhonex': $utils.isIphoneX() }]">未满十八岁禁止入内观看</p>
					<div class="lock-right" :style="lockStyle"></div>
				</div>
			</div>
			<div @click.stop.prevent="handleEnter" :class="['enter', {'leftShiftAnimation': isAnimation }]"></div>
			<div  @click.stop.prevent="handleEnter"  class="enteance" :style="enteanceStyle"></div>
		</div>
		<div class="perface-wrap" v-show="showPerface">
			<div class="bg-bottom"></div>
			<div class="roof"></div>
			<div class="text-wrap">
				<div v-for="(perfaceItem, index) of perfaceText" >
					<div class="userImg" v-if="index === 0"></div>
					<div ref="textWrap" :class="{'excludeStyle': perfaceShowText !== perfaceText[0]}">
						<p class="title">{{perfaceItem.title}}</p>
						<p class="assistTitle">{{perfaceItem.assistTitle}}</p>
						<p class="text" v-for="(item, index) in perfaceItem.content" :key="'key' + index">{{item}}</p>
						<p class="assistContent" v-for="(item, index) in perfaceItem.assistContent" :key="index">{{item}}</p>
					</div>
				</div>
			</div>
			<div class="lineargradient" :class="{'excludeStyle': perfaceShowText !== perfaceText[0]}"></div>
			<router-link to="/catalog" class="enter" :class="{'iPhonex': $utils.isIphoneX()}"></router-link>
		</div>
	</div>
</template>

<script>
import perfaceText from './perfaceText.js'
export default {
	data() {
		return {
			isAnimation: false,
			perfaceText: perfaceText,
			perfaceShowText: perfaceText[0],
			loadimg: false,
			httpText: {},
			showPerface: false
		}
	},
	computed: {
		lockStyle() {
			return {
				top: `calc(50% - 0.3rem)` 
			}
		},
		enteanceStyle() {
			return {
				top: `calc(50% - 0.6rem)` 
			}
		}
	},
	methods: {
		onloadIndex() {
			this.$nextTick(() => {
				this.showPerface = true;
			})
		},
		handleEnter() {
			this.loadimg = true;
			this.$nextTick(() => {
				this.isAnimation = true;
			})
			setTimeout(() => {
				this.$router.push('/perface');
			}, 800)
		},
		async handleBack() {
			this.$yryz.goBack();
		},
	},	
}
</script>
<style>
.museum-wrap{
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	& .museum-index {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		z-index: 5;
	}
	& .back-wrap {
			position: absolute;
			top: 0.8rem;
			left: 0.3rem;
			z-index: 3;
			width: 0.6rem;
			height: 0.6rem;
			background: rgba(0,0,0,0.5);
			border-radius: 0.3rem;
			transition: all 0.5s ease-in;
			color: #fff;
			font-size: 0.3rem;
			line-height: 0.6rem;
			text-align: center;
			&.leftShiftAnimation {
				transform: translateX(-1.64rem);
			}
			&.iPhonex {
				top: 1rem
			}
		}

	& .enter {
		position: absolute;
		z-index: 3;
		bottom: 1rem;
		right: 0.18rem;
		width: 2.46rem;
		height: 0.76rem;
		background: url('./assets/enter-index.png') no-repeat center;
		background-size: contain;
		transition: all 0.6s ease-in;
		&.leftShiftAnimation {
			transform: translateX(2.6rem);
		}
	}

	& .enteance {
		width: 4.2rem;
		height: 2.2rem;
		position: absolute;
		top: 7.5rem;
		left: 2.6rem;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	& .door-wrap {
		width: 100%;
		display: flex;
		position: relative;
		
		& .door-left {
			position: absolute;
			left: 0;
			top: 0;
			width: 63.8%;
			height: 100vh;
			background: url('./assets/door-left.jpg') no-repeat left top;
			background-size: 100% auto;
			transition: all 0.8s ease-in;
			&.leftShiftAnimation {
				transform: translateX(-4.74rem);
			}
			& .title {
				position: absolute;
				top: 1.5rem;
				left: 1rem;
				width: 1.75rem;
				height: 8.62rem;
				background: url('./assets/door-title.png') no-repeat left top;
				background-size: contain ;
				&.iPhonex {
					top: 3.5rem;
				}
			}
			& .lock-left {
				width: 1.36rem;
				height: 1.51rem;
				position: absolute;
				top: 6rem;
				right: 0.4rem;
				background: url('./assets/lock-left.png') no-repeat left top;
				background-size: contain ;
				&.iPhonex {
					top: 7.73rem;
				}
			}
		}

		& .door-right {
			position: absolute;
			right: 0;
			top: 0;
			width: 36.2%;
			height: 100vh;
			background: url('./assets/door-right.jpg') no-repeat right top;
			background-size: 100% auto;
			transition: all 0.8s ease-in;
			&.rightShiftAnimation {
				transform: translateX(2.66rem);
			}
			& .assist {
				position: absolute;
				top: 1.72rem;
				right: 0.4rem;
				writing-mode:  vertical-rl;;
				font-size: 0.28rem;
				color: #fff6e1;
				text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
				letter-spacing: 0.04rem;
				&.iPhonex {
					top: 2.52rem;
				}
			}
			& .lock-right {
				width: 1.36rem;
				height: 1.51rem;
				position: absolute;
				top: 6rem;
				left: 0.34rem;
				background: url('./assets/lock-right.png') no-repeat left top;
				background-size: contain ;
				&.iPhonex {
					top: 7.73rem;
				}
			}
		}
	}
}

.perface-wrap {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: url('./assets/page-bg.png') repeat left top ;
		background-size: cover;
		position: relative;

		& .back-wrap {
			position: absolute;
			top: 0.8rem;
			left: 0.3rem;
			z-index: 3;
			color: #765c37;
			font-size: 0.3rem;
			& .iconfont.icon-back-new {
				margin-right: 0.1rem;
			}
		}
				

		& .roof {
			background: url('./assets/perface-roof.png') no-repeat center;
			background-size: contain;
			width: 1.7rem;
			height: 1.93rem;
			position: absolute;
			top: 0.6rem;
			right: 0;
		}

		& .bg-bottom {
			width: 100vw;
			height: 3.45rem;
			background: url('./assets/bg-bottom.png') no-repeat center;
			background-size: cover;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
		}

		& .userImg {
			width: 4.42rem;
			height: 2.22rem;
			margin: 0 auto 0.34rem;
			background: url('./assets/user-img.png') no-repeat center;
			background-size: contain;
		}
		& .lineargradient {
			position: relative;
			z-index: 2;
			width: 100vw;
			height: 1.5rem;
			top: -0.5rem;
			background: linear-gradient(to top, #f3f3ee, rgba(243,243,238,0.4));
			&.excludeStyle {
				top: -0.3rem;
			}
		}

    & .text-wrap {
			position: relative;
			margin-top: 1.5rem;
      height: 78vh;
      width: 100%;
      overflow: scroll;
      padding: 0 0.6rem;
      color: #65461e;
			-webkit-overflow-scrolling:touch;
			&.excludeStyle {
				margin-top: 1.6rem;
				height: calc(60vh + 1.9rem)
			}
			
			& p:last-child {
				padding-bottom: 0.5rem;
			}

      & .title {
        font-size: 0.42rem;
        text-align: center;
				font-weight: 700;
      }
			& .assistTitle {
				text-align: center;
				font-size: 0.3rem;
				font-weight: 700;
				margin-bottom: 0.2rem;
			}

			& .assistContent {
				font-size: 0.24rem;
				text-align: right;
			}
      & .text {
        margin-top: 0.1rem;
        font-size: 0.3rem;
        text-align: justify;
        /* color: #65461e; */
        line-height: 0.45rem;
        text-indent: 0.6rem;
      }
    }

		& .enter {
			position: absolute;
			bottom: 0.32rem;
			left: 50%;
			margin-left: -2.05rem;
 			width: 4.1rem;
			height: 0.8rem;
			background: url('./assets/enter.png') no-repeat center;
			background-size: contain;
			z-index: 3;
			&.iPhonex {
				bottom: 1.2rem;
			}
		},
		& .toggle-btn {
			position: absolute;
			bottom: 0.54rem;
			color: #9e8358;
			font-size: 0.28rem;
			width: 0.96rem;
			height: 0.42rem;
			line-height: 0.42rem;
			text-align: center;
			display: inline-block;
			&.iPhonex {
				bottom: 1.4rem;
			}

			&.left {
				left: 0.4rem;
			}

			&.right {
				right: 0.4rem;
			}
		}

		& .imgTransparent {
			opacity: 0
		}
  }



/* @keyframes leftShift {
	from {left: 0}
	to {left: -4.74rem}
}

@keyframes rightShift {
	from {right: 0}
	to {right: -2.66rem}
} */
/* @keyframes fadeRoof {
	0% {opacity: 1; top: 0;}
	50% {opacity: 0.3; top: -1rem }
	100% {opacity: 0; top: -1.37rem}
} */
</style>